import {
    a7 as Teleport,
    b as createBaseVNode,
    c as createBlock,
    d as defineComponent,
    f as computed,
    H as normalizeStyle,
    I as renderSlot,
    J as mergeModels,
    m as useModel,
    n as normalizeClass,
    o as openBlock,
    u as unref
} from "./index-Dfdf_Rjk.js";

const _sfc_main = /* @__PURE__ */ defineComponent({
    __name: "SimpleDrawer",
    props: /* @__PURE__ */ mergeModels({
        direction: {default: "right"},
        notCloseOnClick: {type: Boolean}
    }, {
        "modelValue": {type: Boolean},
        "modelModifiers": {}
    }),
    emits: ["update:modelValue"],
    setup(__props) {
        const props = __props;
        const modelValue = useModel(__props, "modelValue");
        const positionClass = computed(() => {
            switch (props.direction) {
                case "bottom":
                    return "bottom-0 left-0 right-0 border-t";
                case "top":
                    return "top-0 left-0 right-0 border-b";
                case "left":
                    return "bottom-0 left-0 top-0 border-r";
                case "right":
                    return "bottom-0 top-0 right-0 border-l";
                default:
                    return "";
            }
        });
        const transform = computed(() => {
            switch (props.direction) {
                case "bottom":
                    return "translateY(100%)";
                case "top":
                    return "translateY(-100%)";
                case "left":
                    return "translateX(-100%)";
                case "right":
                    return "translateX(100%)";
                default:
                    return "";
            }
        });
        return (_ctx, _cache) => {
            return openBlock(), createBlock(Teleport, {to: "body"}, [
                createBaseVNode("div", {
                    class: normalizeClass(["fixed inset-0 z-200", modelValue.value ? "" : "pointer-events-none"])
                }, [
                    createBaseVNode("div", {
                        class: normalizeClass(["absolute inset-0 transition-opacity duration-100 ease-out", modelValue.value ? "bg-dark/60" : "opacity-0"]),
                        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.notCloseOnClick ? null : modelValue.value = false)
                    }, null, 2),
                    createBaseVNode("div", {
                        class: normalizeClass(["absolute border border-base bg-base transition-all duration-100 ease-out", unref(positionClass)]),
                        style: normalizeStyle(modelValue.value ? {} : {transform: unref(transform)})
                    }, [
                        renderSlot(_ctx.$slots, "default")
                    ], 6)
                ], 2)
            ]);
        };
    }
});
export {
    _sfc_main as _
};
